<template>
  <div class="Twobox">
    <div id="echartbox"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  let mychart = echarts.init(document.querySelector("#echartbox"));
  let option = {
    title: {
      text: "机械设备投入分析(台)",
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      top: "20%",
      bottom: "30%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["生活类", "农业类", "工业类", "生活类", "农业类", "工业类"],
        axisTick: {
          alignWithLabel: true,
        },

        axisLabel: {
          color: "#fff",
          interval: 0,
          rotate: 90,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          lineStyle: {
            type: "dotted",
            width: 2,
            height: 1
          },
        },
      },
    ],
    series: [
      {
        type: "bar",
        barCatgoryGap: 50,
        barwidth: 20,
        label: {
          show: true,
          color: "#ccc",
          position: "top",
        },
        data: [15, 70, 300, 10, 90, 310],
      },
    ],
  };
  mychart.setOption(option);
});
</script>

<style scoped>
.Twobox {
  width: 288px;
  height: 100%;
}

#echartbox {
  width: 288px;
  height: 300px;
  /* background-color: yellowgreen; */
}
</style>